<!--
 * @author: 十一
 * @since: 2024-04-25
 * dictionary-components.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    width="500"
    :title="title"
    @close="onClose"
    @after-open-change="afterOpenChange"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="图标" v-bind="validateInfos.icon_url">
        <a-upload
          v-model:file-list="fileList"
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :customRequest="uploadFile"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">上传缩略图</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="分类类型">
        <a-select v-model:value="formState.type" placeholder="请选择性别">
          <a-select-option :value="item.code" v-for="item in types" :key="item.id">{{
            item.title
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分类标题" v-bind="validateInfos.title">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item label="描述" v-bind="validateInfos.description">
        <a-input v-model:value="formState.description" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
        <a-button @click="onSubmit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Form } from 'ant-design-vue'
import {DataEcho} from '@/utils/dataEcho'
import { addClassification, editClassification, uploadFiles } from '@/servers/main'
import { message } from 'ant-design-vue'
import { useDictionaryStore } from '@/stores/useDictionaryStore'
const { dictionary } = useDictionaryStore()
import { formatDictionaryList } from '@/utils/common'
import { useUserInfoStore } from '@/stores/userinfoStrore'
const { userInfo } = useUserInfoStore()
// 上传
const fileList = ref([])
const loading = ref<boolean>(false)
const imageUrl = ref<string>('')
  const formRef = ref();
const uploadFile = (file: any) => {
  console.log(file)
  let formData = new FormData()
  formData.append('file', file.file)
  uploadFiles(formData).then((response: any) => {
    console.log(response)
    imageUrl.value = response.result
    formState.img_url = response.result
  })
}
const types = formatDictionaryList(dictionary, 'CLASSIFICATION')
console.log(types)
const useForm = Form.useForm
const labelCol = { span: 6 }
const wrapperCol = { span: 18 }
const formState = reactive({
  user_id: userInfo.id,
  img_url: '',
  title: '',
  type: 0,
  description: ''
})
const rules = reactive({
  name: [{ required: true, message: '字典名称不能为空', trigger: 'change' }],
  type: [{ required: true, message: '字典类型不能为空', trigger: 'change' }],
  code: [{ required: true, message: '字典编码不能为空', trigger: 'change' }],
  color: [{ required: true, message: '字典颜色值不能为空', trigger: 'change' }]
})
const { resetFields, validate, validateInfos } = useForm(formState, rules)
const onSubmit = () => {
  validate()
    .then(() => {
      if (state.value == 0) {
        addClassification(formState).then((res: any) => {
          if (res.code === 200) {
            message.success(res.message)
            emit('childGetData')
            onClose()
          } else {
            message.error(res.message)
          }
        })
      } else {
        editClassification(formState).then((res: any) => {
          if (res.code === 200) {
            message.success(res.message)
            emit('childGetData')
            onClose()
          } else {
            message.error(res.message)
          }
        })
      }
    })
    .catch((err) => {
      console.log('error', err)
    })
}
const open = ref<boolean>(false)
const afterOpenChange = (bool: boolean) => {
  console.log('open', bool)
}
let title = ref<string>('')
let state = ref<number>(0)
const showDrawer = (value: any) => {
  open.value = true
  title.value = value.title
  state.value = value.state
  resetFields()
  if (value.state == 1) {
    DataEcho(formState, value.options)
    imageUrl.value = value.options.img_url
  }else {

    imageUrl.value = ''
  }
}
const onClose = () => {
  resetFields()
  title.value = '新增'
  open.value = false
}
const emit = defineEmits(['childGetData'])
defineExpose({ showDrawer })
</script>
<style lang="less" scoped>
:deep .ant-row {
  align-items: center;
}
</style>
